import React, { Component } from 'react'

// 导入 容器和UI框架结合的插件
import { connect } from 'react-redux'
import { addPerson } from '../../redux/actions/person'
class Person extends Component {
  // nameRef
  nameRef = React.createRef()
  // ageRef
  ageRef = React.createRef()
  //   新增一个人的处理函数
  addPersonFn = () => {
    // 获取组件的值
    const name = this.nameRef.current.value
    const age = +this.ageRef.current.value
    // 调用父组件的方法 传入参数
    this.props.addPerson({ id: Date.now(), name, age })
    // 清空内容
    this.nameRef.current.value = ''
    this.ageRef.current.value = ''
  }
  render() {
    return (
      <div>
        <h1>Person组件:</h1>
        <h3>求和为：{this.props.count}</h3>
        <input type="text" placeholder="请输入名字" ref={this.nameRef} />
        <input type="text" placeholder="请输入年龄" ref={this.ageRef} />
        <button onClick={this.addPersonFn}>添加</button>
        <ul>
          {this.props.person.map((item) => (
            <li key={item.id}>
              姓名：{item.name}----年龄：{item.age}
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

export default connect(
  (state) => ({ person: state.person, count: state.count }),
  {
    addPerson,
  }
)(Person)
